<template>
	<view class="bg-container" :style="'background-image: url('+bg1+');'">
		<view class="fixed">
			<cu-custom bgColor="bg-shadeTop " :isIcon="true">
				<view slot="backText" >
					<view @click="openUserCenter" class="flex text-white shadow color-container font-25 align-center flex-row px-1 py line-h rounded-circle bg-light text-gray">
						<image style="width: 40rpx;height: 40rpx;" class="rounded-circle" src="../../static/logo.png" mode=""></image>
						个人中心
					</view>
				</view>
				<!-- <view slot="content">欢迎使用</view> -->
			</cu-custom>
		</view>
		
		
		<view :style="'margin-top:'+marginTop+'px'" class="rounded-circle flex align-center justify-center position-fixed avatar-container" >
			<view class="flex flex-direction justify-center align-center" style="z-index: 99;">
				<view class='cu-avatar shadow radius position-relative' style="width: 80rpx;height: 80rpx; background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
					<view class='cu-tag badge cuIcon-male'></view>
				</view>
				<view class="font-35 text-cut  text-shadow text-white text-center" style="width: 140rpx;">
					Daniel4545445
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				marginTop:130,
				title: 'Hello',
				bg:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
				bg1:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-366ba130-3d1f-4284-a453-7dde238bdc9d/f5273685-76d4-4c75-a264-d1fd52b274a4.gif'
			}
		},
		onLoad() {
			let screenHeight=uni.getSystemInfoSync().screenHeight
			let statusBarHeight=uni.getSystemInfoSync().statusBarHeight
			console.log(statusBarHeight)
			this.marginTop=screenHeight*(465/1422) - uni.upx2px(180)-statusBarHeight
			
		},
		methods: {
			openUserCenter(){
				uni.navigateTo({
					url:'/pages/user-info/user-info'
				})
			}
		}
	}
</script>

<style>
	.container-box{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		filter: blur(2px);
		z-index: -1;
	}
	.bg-container{
		height: 100vh;
		background-repeat: no-repeat;
		background-size:cover ;
		background-position-x: center;
		background-position-y: center;
	}
	.box-animation {
		-webkit-animation: free_download 1s linear alternate infinite;
		animation: free_download 1s linear alternate infinite;
	}
	.avatar-container{
		background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
		box-shadow: 0 0 20upx #21d4fd;
		width: 180rpx;height: 180rpx;margin-left:285rpx;
	}
	.color-container{
		background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
		box-shadow: 0 0 20upx #21d4fd;
	}
	@-webkit-keyframes free_download {
		0% {
			-webkit-transform: scale(0.9);
		}
	
		100% {
			-webkit-transform: scale(1);
		}
	}
	
	@keyframes free_download {
		0% {
			transform: scale(0.9);
		}
	
		100% {
			transform: scale(1);
		}
	}
</style>
